<template>
  <div class="attend_detail">
    <div class="attend_detail_box" v-if="editShow">
      <div class="attend_detail_left">
        <div class="info_detail_title">
          <span class="title_name">{{ formData.formName }}</span>
          <el-button
            type="primary"
            v-if="
              (formData.dailyStatus == '3' || formData.dailyStatus == '4') &&
              staticsShow == '1' &&
              $route.query.type != '3'
            "
            size="small"
            icon="el-icon-edit"
            class="f-l m-l-10 m-t-1"
            @click="editInfor">
            编辑
          </el-button>
          <el-button
            type="warning"
            v-if="
              (formData.dailyStatus == '3' || formData.isCanZZ == '1') &&
              editShow &&
              $route.query.type != '3' &&
              staticsShow == '1'
            "
            size="small"
            icon="el-icon-document-delete"
            class="f-l m-l-10 m-t-1"
            @click="endInfor">
            终止
          </el-button>
          <el-button
            v-if="
              formData.canRevoke == '1' && staticsShow == '1' && $route.query.type != '3' && $route.query.type != '1'
            "
            type="warning"
            icon="el-icon-s-promotion"
            plain
            size="small"
            class="f-l m-l-10 m-t-1"
            @click="delInfor">
            撤回
          </el-button>
          <el-button
            type="primary"
            v-if="
              formData.dailyStatus == '1' &&
              staticsShow == '1' &&
              $route.query.type != '3' &&
              formData.isShowCancel === '1' &&
              !pageFrom
            "
            size="small"
            class="f-l m-l-10 m-t-1"
            @click="backForm">
            一键销假
          </el-button>
          <span
            class="infor_r_btn"
            :class="
              formData.dailyStatus == '0'
                ? 'r_btn_red'
                : formData.dailyStatus == '1'
                ? 'r_btn_success'
                : 'r_btn_primary'
            ">
            {{ menuData(formData.dailyStatus) }}
          </span>
        </div>
        <div class="right_box">
          <div class="attend_main">
            <div class="item_select_tips">基本信息</div>
            <div>
              <div class="attendance_add_infor1">
                <p>
                  <span>申请人：</span>
                  <span>{{ formData.createBy }}</span>
                </p>
                <p>
                  <span>部门名称：</span>
                  <span>{{ formData.orgName }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>联系电话：</span>
                  <span>{{ formData.mobile }}</span>
                </p>
                <p>
                  <span>申请时间：</span>
                  <span>{{ formData.createTime }}</span>
                </p>
              </div>
            </div>
            <div class="item_select_tips">{{ formTitle }}信息</div>
            <div v-if="formData.formId == '1' || formData.formId == '2' || formData.formId == '3'">
              <div class="attendance_add_infor1">
                <p class="type_p">
                  <span>{{ formData.formId == '2' ? '公务外出类型：' : '请假类型：' }}</span>
                  <span>{{ formData.leaveName }}</span>
                  <span>
                    {{ formData.isSpecialSick === '1' ? '（提示：逾期未上传病假凭证，系统已转事假。）' : '' }}
                  </span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>{{ formData.formId == '2' ? '预计开始时间：' : '请假开始时间：' }}</span>
                  <span>{{ formData.startTime }}</span>
                </p>
                <p>
                  <span>{{ formData.formId == '2' ? '预计结束时间：' : '请假结束时间：' }}</span>
                  <span>{{ formData.endTime }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1" v-if="formData.leaveId == '25'">
                <p>
                  <span>请假区间：</span>
                  <span>
                    {{ moment(formData.startTime).format('HH:mm:ss') == '08:00:00' ? '上班后一小时' : '下班前一小时' }}
                  </span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>{{ formData.formId == '2' ? '外出小时数：' : '请假小时数：' }}</span>
                  <span>{{ formData.regHours }}小时</span>
                </p>
                <p>
                  <span>{{ formData.formId == '2' ? '外出天数：' : '请假天数：' }}</span>
                  <span>
                    工作日{{ formData.regDays || 0 }}天
                    <span v-if="formData.calendarDays && formData.calendarDays != '0'">
                      ， 日历日{{ formData.calendarDays || 0 }}天
                    </span>
                  </span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <div>
                  <span>{{ formData.formId == '2' ? '外出事由：' : '请假事由：' }}</span>
                  <span>{{ formData.reason }}</span>
                </div>
              </div>
              <div class="add_file_d" v-if="formData.formId == '3' && formData.leaveEnclosureList.length">
                <p class="att_file_p">
                  请假附件：
                  <UploadPreview
                    class="att_file"
                    :file-list="formData.leaveEnclosureList || []"
                    layout="list"></UploadPreview>
                </p>
              </div>
              <div class="attendance_add_infor1" v-if="formData.formId == '3'">
                <p>
                  <span>销假时间：</span>
                  <span>{{ formData.backTime }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1" v-if="formData.formId !== '3'">
                <p>
                  <span>顶岗人员姓名：</span>
                  <span>{{ formData.replaceName || '--' }}</span>
                </p>
                <p>
                  <span>联系电话：</span>
                  <span>{{ formData.replaceMobile || '--' }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1" v-if="formData.formId !== '3'">
                <div>
                  <span>备注：</span>
                  <span>{{ formData.extentName || '--' }}</span>
                </div>
              </div>
              <div class="attendance_add_infor1" v-if="formData.formId == '3'">
                <div>
                  <span>备注：</span>
                  <span>{{ formData.remark || '--' }}</span>
                </div>
              </div>
              <div class="add_file_d" v-if="formData.enclosureList && formData.enclosureList.length > 0">
                <p class="att_file_p">
                  附件：
                  <UploadPreview
                    class="att_file"
                    :file-list="formData.enclosureList || []"
                    layout="list"></UploadPreview>
                </p>
              </div>
            </div>
            <div v-if="formData.formId == '4'">
              <div class="attendance_add_infor1">
                <p>
                  <span>加班开始时间：</span>
                  <span>{{ formData.startOverTime }}</span>
                </p>
                <p>
                  <span>加班结束时间：</span>
                  <span>{{ formData.endOverTime }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>加班小时数：</span>
                  <span>{{ formData.overHours }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>抵扣考勤开始时间：</span>
                  <span>{{ formData.startTime }}</span>
                </p>
                <p>
                  <span>抵扣考勤结束时间：</span>
                  <span>{{ formData.endTime }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <div>
                  <span>工作事由：</span>
                  <span>{{ formData.reason || '--' }}</span>
                </div>
              </div>
            </div>
            <div v-if="formData.formId == '5'">
              <div class="attendance_add_infor1">
                <p>
                  <span>补卡时间：</span>
                  <span>{{ formData.startTime }}</span>
                </p>
                <p>
                  <span>补卡类型：</span>
                  <span>{{ formData.leaveName }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <div>
                  <span>补卡原因：</span>
                  <span>{{ formData.reason || '--' }}</span>
                </div>
              </div>
              <div class="attendance_add_infor1">
                <div>
                  <span>备注：</span>
                  <span>{{ formData.remark || '--' }}</span>
                </div>
              </div>
            </div>
            <div v-if="formData.formId == '6'">
              <div class="attendance_add_infor1">
                <p>
                  <span>加班开始时间：</span>
                  <span>{{ formData.startOverTime }}</span>
                </p>
                <p>
                  <span>加班结束时间：</span>
                  <span>{{ formData.endOverTime }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>调休开始时间：</span>
                  <span>{{ formData.startTime }}</span>
                </p>
                <p>
                  <span>调休结束时间：</span>
                  <span>{{ formData.endTime }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <div>
                  <span>调休事由：</span>
                  <span>{{ formData.reason || '--' }}</span>
                </div>
              </div>
              <div class="add_file_d" v-if="formData.enclosureList && formData.enclosureList.length > 0">
                <p class="att_file_p">
                  附件：
                  <UploadPreview
                    class="att_file"
                    :file-list="formData.enclosureList || []"
                    layout="list"></UploadPreview>
                </p>
              </div>
            </div>
            <div v-if="formData.formId == '7'">
              <div class="attendance_add_infor1">
                <p>
                  <span>出行范围：</span>
                  <span>{{ formData.extentName }}</span>
                </p>
                <p>
                  <span>原单位是否同意：</span>
                  <span>{{ formData.isOrganAgree == '1' ? '是' : '否' }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>出行目的地：</span>
                  <span>{{ formData.outDest }}</span>
                </p>
                <p>
                  <span>是否中高风险区：</span>
                  <span>{{ formData.isRiskZone == '1' ? '是' : '否' }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>出行时间：</span>
                  <span>{{ formData.startTime }}</span>
                </p>
                <p>
                  <span>返回时间：</span>
                  <span>{{ formData.endTime }}</span>
                </p>
              </div>
              <div class="attendance_add_infor1">
                <p>
                  <span>出行天数：</span>
                  <span>{{ formData.regDays }}天</span>
                </p>
              </div>
              <div class="add_file_d" v-if="formData.enclosureList && formData.enclosureList.length > 0">
                <p class="att_file_p">
                  附件：
                  <UploadPreview
                    class="att_file"
                    :file-list="formData.enclosureList || []"
                    layout="list"></UploadPreview>
                </p>
              </div>
            </div>

            <template v-if="staticsShow == '3' && oneItem.canApprove == '1'">
              <div class="item_select_tips">审批意见</div>
              <div class="attendance_add_infor1">
                <el-input
                  placeholder="请输入"
                  type="textarea"
                  v-model="desc"
                  size="small"
                  :rows="5"
                  maxlength="100"
                  show-word-limit></el-input>
              </div>
              <div class="btn_check">
                <el-button size="small" type="primary" @click="setData('1')">通 过</el-button>
                <el-button @click="setData('2')" size="small" type="warning">不通过</el-button>
                <el-button @click="setData('3')" type="warning" size="small">退回</el-button>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="attend_detail_r" v-if="editShow">
        <div class="add_r_title">审批流程</div>
        <AttendSteps ref="refsFlow" />
      </div>
    </div>
    <template v-if="formData.isCanceled === '1' && editShow && formData.formId === '1'">
      <div class="back-box">
        <div class="item_select_tips">
          销假时间：
          <span>{{ formData.backTime }}</span>
        </div>

        <div class="item_select_tips">实际请假：</div>
        <div>
          <div class="attendance_add_infor1">
            <p>
              <span>开始时间：</span>
              <span>{{ formData.validStartTime }}</span>
            </p>
            <p>
              <span>结束时间：</span>
              <span>{{ formData.validEndTime }}</span>
            </p>
          </div>
          <div class="attendance_add_infor1">
            <p>
              <span>请假小时数：</span>
              <span>{{ formData.validHours }}小时</span>
            </p>
            <p>
              <span>请假天数：</span>
              <span>工作日{{ formData.validDays }}天，日历日{{ formData.validCalendarDays }}天</span>
            </p>
          </div>
        </div>
        <template v-if="formData.cancelEnclosureList && formData.cancelEnclosureList.length">
          <div class="item_select_tips">销假附件：</div>
          <div>
            <UploadPreview
              class="att_file"
              :file-list="formData.cancelEnclosureList || []"
              layout="list"></UploadPreview>
          </div>
        </template>
      </div>
    </template>

    <div class="attend_detail_add" v-if="!editShow">
      <div class="info_detail_title">
        <span class="title_name">{{ formData.formName }}</span>
        <span
          class="infor_r_btn"
          :class="
            formData.dailyStatus == '0' ? 'r_btn_success' : formData.dailyStatus == '1' ? 'r_btn_primary' : 'r_btn_red'
          ">
          {{ menuData(formData.dailyStatus) }}
        </span>
      </div>
      <div class="info_add_duty">
        <AttendanceAdd
          :id="formData.id"
          :oneItem="oneItem"
          :tabsOne="tabsOne"
          staticsShow="1"
          @backReturn="backReturn" />
      </div>
    </div>
  </div>
</template>

<script>
import AttendanceAdd from './AttendanceAdd'
import AttendSteps from './AttendSteps'
import UploadPreview from '@com/UploadPreview/index.vue'
import { getAttendanceDailyInfo, updateAttendanceDailyStatus } from '@apis/api-attendance.js'
import moment from 'moment'
export default {
  components: {
    AttendanceAdd,
    AttendSteps,
    UploadPreview,
  },
  props: {
    id: {
      type: String,
      default: '',
    },
    formId: {
      type: String,
      default: '',
    },
    // 1我的表单、2大厅汇总，3审批
    staticsShow: {
      type: String,
      default: '1',
    },
    keysItem: {
      type: Object,
      default() {
        return {}
      },
    },
    pageFrom: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      moment: moment,
      // 0审批中 1通过 2不通过 3退回 4撤销
      oneItem: {
        processInstanceId: '',
      },
      formData: {},
      tabsOne: {},
      formTitle: '',
      editShow: true,
      desc: '',
      leaveIdList: ['3', '4', '5', '6', '21', '22', '24', '25', '29'], // <!-- 22丧假,3婚假,4产假,21陪产假,6陪产假,5年休假,25哺乳假,24育儿假,29独生子女护理假-->
    }
  },
  watch: {
    id: {
      handler(news) {
        this.getDetail(this.id, this.formId, this.keysItem)
      },
      deep: true,
    },
  },
  created() {
    // 退回编辑
    if (this.id) {
      this.getDetail(this.id, this.formId, this.keysItem)
    }
  },
  mounted() {
    console.log(this.pageFrom)
  },
  methods: {
    menuData(status) {
      switch (status) {
        case '0':
          return '审批中'
        case '1':
          return '通过'
        case '2':
          return '不通过'
        case '3':
          return '已退回'
        case '4':
          return '已撤销'
        case '5':
          return '已终止'
        default:
          break
      }
    },
    getDetail(id, formId, item) {
      this.desc = ''
      this.editShow = true
      this.oneItem = item
      const approveFlow = {
        formId: item.formId,
        processInstanceId: item.processInstanceId,
        type: '2',
      }
      this.$nextTick(() => {
        this.$refs.refsFlow.getFlow(approveFlow)
      })
      getAttendanceDailyInfo({
        id: id,
        formId: formId,
      }).then(res => {
        this.formData = res.data
        this.tabsOne = {
          formName: res.data.formName,
          id: res.data.formId,
        }
        if (
          (this.formData.formId === '1' || this.formData.formId === '3') &&
          this.leaveIdList.includes(this.formData.leaveId)
        ) {
          if (this.formData.leaveId === '5' || this.formData.leaveId === '24') {
            let morNing = ''
            let afterNoon = ''
            if (moment(this.formData.startTime).format('HH:mm:ss') === '08:00:00') {
              morNing = '上午'
            } else if (
              moment(this.formData.startTime).format('HH:mm:ss') === '12:00:00' ||
              moment(this.formData.startTime).format('HH:mm:ss') === '13:00:00'
            ) {
              morNing = '下午'
            }
            if (
              moment(this.formData.endTime).format('HH:mm:ss') === '12:00:00' ||
              moment(this.formData.endTime).format('HH:mm:ss') === '13:00:00'
            ) {
              afterNoon = '上午'
            } else if (moment(this.formData.endTime).format('HH:mm:ss') === '18:00:00') {
              afterNoon = '下午'
            }
            // if(moment(this.formData.startTime).format('HH') >= '08' && moment(this.formData.startTime).format('HH') <= '10'){
            //   morNing = '上午'
            // }else if(moment(this.formData.startTime).format('HH') >= '11' && moment(this.formData.startTime).format('HH') <= '14'){
            //   morNing = '下午'
            // }
            // if(moment(this.formData.endTime).format('HH') >= '11' && moment(this.formData.endTime).format('HH') <= '14'){
            //   afterNoon = '上午'
            // }else if(moment(this.formData.endTime).format('HH') >= '16' && moment(this.formData.endTime).format('HH') <= '18:00:00'){
            //   afterNoon = '下午'
            // }
            this.formData.startTime = moment(this.formData.startTime).format('YYYY-MM-DD') + morNing
            this.formData.endTime = moment(this.formData.endTime).format('YYYY-MM-DD') + afterNoon
          } else {
            this.formData.startTime = moment(this.formData.startTime).format('YYYY-MM-DD')
            this.formData.endTime = moment(this.formData.endTime).format('YYYY-MM-DD')
          }
        } else {
          this.formData.startTime = moment(this.formData.startTime).format('YYYY-MM-DD HH:mm')
          this.formData.endTime = moment(this.formData.endTime).format('YYYY-MM-DD HH:mm')
        }
        this.formTitle = this.formData.formName.substring(0, this.formData.formName.length - 1)
      })
    },
    // 撤销
    delInfor() {
      this.$confirm('您确定撤回表单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.checkUpdate('4', '')
        })
        .catch(() => {})
    },
    endInfor() {
      this.$confirm('您确定要终止表单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.checkUpdate('5', '')
        })
        .catch(() => {})
    },
    // 编辑
    editInfor() {
      this.editShow = false
    },
    backReturn(type) {
      this.editShow = true
      const approveFlow = {
        formId: this.oneItem.formId,
        processInstanceId: this.oneItem.processInstanceId,
        type: '2',
      }
      this.$nextTick(() => {
        this.$refs.refsFlow.getFlow(approveFlow)
      })
      if (type === 2) {
        this.$emit('backPage', this.formData.id)
      }
    },

    setData(type) {
      let content = ''
      if (this.desc === '') {
        if (type === '1') {
          content = '同意'
        } else if (type === '2' || type === '3') {
          this.$message({
            message: '请填写审批意见',
            type: 'warning',
          })
          return
        }
      } else {
        content = this.desc
      }
      this.$confirm('您确定要提交考勤审批吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.checkUpdate(type, content)
        })
        .catch(() => {})
    },
    checkUpdate(type, content) {
      updateAttendanceDailyStatus({
        content: content,
        dailyId: this.formData.id,
        formId: this.formData.formId,
        status: type,
        processInstanceId: this.oneItem.processInstanceId,
        taskId: this.oneItem.taskId,
      }).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.$emit('backPage', this.oneItem)
        }
      })
    },
    backForm() {
      const data = {
        formName: '销假单',
        id: '3',
        dailyId: this.formData.id,
        formId: this.formData.formId,
      }
      this.$emit('backForm', data)
    },
  },
}
</script>

<style lang="scss" scoped>
.attend_detail {
  height: 100%;
  font-size: 16px;
  display: flex;
  flex-direction: column;

  .attend_detail_box {
    flex: 1;
    // width: 100%;
    display: flex;
    overflow: hidden;
  }
  .attend_detail_add {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    .info_add_duty {
      height: calc(100% - 60px);
    }
  }
  .attend_detail_r {
    width: 280px;
    height: 99%;
    padding: 10px;
    border-left: 1px solid #ececec;
    overflow-y: auto;
    margin-bottom: 10px;
    min-height: 380px;
    .add_r_title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
  .attend_detail_left {
    height: 100%;
    width: calc(100% - 280px);
  }
  .info_detail_title {
    text-align: center;
    height: 60px;
    // line-height: 60px;
    font-weight: bold;
    font-size: 20px;
    .title_name {
      margin-top: 10px;
      display: inline-block;
    }
    .iconfont {
      font-weight: normal;
      font-size: 62px;
      margin-right: 10px;
      float: right;
    }
  }
  .infor_r_btn {
    width: 70px;
    height: 38px;
    line-height: 38px;
    // border:1px solid #ececec;
    float: right;
    font-size: 16px;
    font-weight: normal;
    margin: 10px 10px 0 0;
    color: #fff;
  }
  .r_btn_success {
    color: #67c23a;
  }
  .r_btn_primary {
    color: #e6a23c;
  }
  .r_btn_red {
    color: #f56c6c;
  }
  .m-r-10 {
    margin-right: 10px;
  }
  .right_box {
    height: calc(100% - 60px);
    width: 100%;
    .attend_main {
      width: 100%;
      padding: 0 20px;
      height: 100%;
      margin: 0 auto;
      overflow-y: auto;
      // line-height: 38px;
    }
    .item_select_tips {
      margin-bottom: 10px;
      padding-left: 10px;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      border-left: 3px solid #2670df;
      line-height: 22px;
      span {
        font-weight: 400;
        color: #909399;
      }
    }
    .attendance_add_infor1 {
      display: flex;
      margin-bottom: 20px;
      p {
        width: 50%;
        display: flex;
        align-items: center;
        span:nth-child(1) {
          word-break: keep-all;
          display: inline-block;
          // width: 120px;
          // text-align: right;
        }
        span:nth-child(2) {
          color: #909399;
          display: inline-block;
          word-break: break-all;
          // width: calc(100% - 120px);
        }
      }
      .type_p {
        width: 100%;
        span:nth-child(3) {
          color: #909399;
          display: inline-block;
          word-break: break-all;
          margin-left: 10px;
          font-size: 14px;
          color: #d9110d;
        }
      }
      div {
        width: 100%;
        display: flex;
        // align-items: center;
        span:nth-child(1) {
          display: inline-block;
          word-break: keep-all;
          // width: 120px;
          // text-align: right;
        }
        span:nth-child(2) {
          color: #909399;
          display: inline-block;
          word-break: break-all;
          // width: calc(100% - 120px);
          // text-align: left;
        }
      }
    }
    .add_file_d {
      margin-bottom: 20px;
      .att_file {
        margin-top: 10px;
        line-height: 20px;
      }
      .att_file_p {
        width: 90%;
      }
    }
    .info_approve {
      padding: 10px;
      background-color: #ececec;
    }
    .btn_check {
      margin-left: 10px;
      text-align: right;
      margin-bottom: 10px;
    }
  }
  .back-box {
    margin-top: 10px;
    border-top: 1px solid #c6c6c6;
    padding-top: 15px;
    padding: 15px 20px;
    .item_select_tips {
      margin-bottom: 10px;
      padding-left: 10px;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      border-left: 3px solid #a40002;
      line-height: 22px;
      span {
        font-weight: 400;
        color: #909399;
      }
    }
    .att_file {
      margin-bottom: 10px;
    }
    .attendance_add_infor1 {
      display: flex;
      margin-bottom: 10px;
      p {
        width: 50%;
        display: flex;
        align-items: center;
        span:nth-child(1) {
          word-break: keep-all;
          display: inline-block;
          // width: 120px;
          // text-align: right;
        }
        span:nth-child(2) {
          color: #909399;
          display: inline-block;
          word-break: break-all;
          // width: calc(100% - 120px);
        }
      }
      div {
        width: 100%;
        display: flex;
        // align-items: center;
        span:nth-child(1) {
          display: inline-block;
          word-break: keep-all;
          // width: 120px;
          // text-align: right;
        }
        span:nth-child(2) {
          color: #909399;
          display: inline-block;
          word-break: break-all;
          // width: calc(100% - 120px);
          // text-align: left;
        }
      }
    }
  }
}
</style>
